<template>
    <div class="fitment-case">
        <div class="col-lg-1 col-md-1 col-sm-1 min-700" style="height: 100%"></div>
        <div class="col-lg-10 col-md-10 col-sm-10">
            <h2 style="color: #555">装修案例</h2>
            <hr style="width:50px;height: 5px;background: #F84B4A;margin-bottom: 50px;border: none;float: left">
            <div style="width: 100%;height: 300px;position: relative;margin-top: 60px">

                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="c in cases" @click="showCase(c.id)">
                            <div style="width: 98%;height: 78%;margin-top: -30px;position: absolute">
                                <img :src="c.caseimg" style="width: 100%;height: 100%;">
                            </div>
                            <div style="width: 98%;height: 18%;margin-top: 130px;position: absolute">
                                <span style="color: #555">{{ c.city }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style>

</style>
<script>
    import host from '../../../../tools/config';
    import Swiper from '../../../../public/static/js/swiper-3.4.1.min.js';
    export default{
        data(){
            return{
                host: host.option.host,
                cases:''
            }
        },
        components:{

        },
        created(){
            var _this = this;
            this.$http.get('/fit_case')
                .then(function(res){
                    _this.cases = res.body;
                })
                .then(function(){
                    // 获取到案例后，按照轮播图显示
                    var slide;
                    if(window.screen.width > 972){
                        slide = 3
                    }else if(window.screen.width < 972 && window.screen.width > 700){
                        slide = 2;
                    }else{
                        slide = 1;
                    }

                    var swiper = new Swiper('.swiper-container', {
                        slidesPerView: slide,
                        loop:false,
                        grabCursor: true,
                        paginationClickable: true,
                        spaceBetween: 30,
                        autoplay: 3000
                    });
                });
        },
        methods:{
            showCase: function(id){
                window.location.href = '/case_detail?id='+id;
            }
        }
    }
</script>
